
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户列表</title>
<link rel="stylesheet" type="text/css" media="screen"
	href="../static/css/bootstrap.min.css">
</head>
<body>

	<div class="container">
		<ol class="breadcrumb">
			<li><a href="#">用户管理</a></li>
			<li class="active">用户列表</li>
			<li style="float:right">
			<a href="/loginOut">退出</a>&nbsp;&nbsp;&nbsp;&nbsp;</li>
		</ol>
		
		<!-- 主体内容开始 -->
			<!-- 第一行开始 -->
			<div class="row">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
				<!-- 表单开始 -->
				<form action="" class="form-horizontal">
					<!-- panel开始 -->
					<div class="panel panel-info">
						<div class="panel-heading"><i class="fa fa-search"></i>&nbsp;&nbsp;查询</div>
						<!-- panel-body开始 -->
						<div class="panel-body">
							
								<div class="row">
									<div class="col-xs-12 col-sm-12 col-md-5 col-lg-5 ">
										<div class="form-group">
											<label for="userName" class="col-sm-3 control-label">用户名</label>
											<div class="col-sm-9">
												<input type="text" class="form-control" name="userName"
													placeholder="用户名">
											</div>
										</div>
										
									</div>

								</div>

						</div>
						<!-- panel-body结束 -->
						<div class="panel-footer text-right">
							<button type="reset" name="resetBtn" id="resetBtn"
								class="btn btn-warning">重置</button>
							<input type="submit" value="查询" class="btn btn-primary" ></input>
							<button type="button" name="addBtn" class="btn btn-info"
								 onclick="location.href='addUser.html'">添加用户</button>
						</div>
					</div>
					<!-- panel结束 -->
					</form>
					<!--表单结束 -->
				</div>

			</div>
			<!-- 第一行结束 -->
		
		<div class="row">
			<div class="col-md-12">
				<div class="panel panel-primary">
					<div class="panel-heading">用户列表</div>
					<table class="table table-bordered table-hover text-center">
						<thead>
							<tr class="info">
								<td>用户名称</td>
								<td>用户密码</td>
								<td>操作</td>
							</tr>
						</thead>
						<tbody id="tb-content">

						</tbody>
					</table>

				</div>
			</div>

		</div>

	</div>
</body>
</html>
<script src="../static/js/axios.min.js"></script>
<script>
	//在页面加载的时候 获取所有用户信息数据
	window.onload = function () {
		// alert(11111)
		const url = "/user/list"
		axios.get(url)
				.then(function (res) {
					// console.log(res.data)
					const responseBody = res.data
					if (responseBody.code === 200){
						//tbody 添加 字符串数据 进行表格渲染
						const users = responseBody.data
						//循环遍历集合
						let str = ""
						for (let i = 0; i < users.length; i++) {
							str += `
									<tr>
										<td>${users[i].username}</td>
										<td>${users[i].password}</td>
										<td>
										<button type="button" name="queryBtn" onclick="toUpdateUserPage(${users[i].id})" class="btn btn-success btn-xs" >更新</button>|
										<button type="button" name="queryBtn" onclick="deleteUser(${users[i].id})" class="btn btn-danger btn-xs" >删除</button>
										</td>
									</tr>
									`
							console.log(str)
						}
						//找元素
						document.getElementById("tb-content").innerHTML = str
					}





				})


	}


	function deleteUser(id){

		// alert(id)

		const url = "/user/delete/"+id

		axios.delete(url)
				.then(function (res) {
					// console.log(res.data)

					location.href="/users/users.html"

				});



	}

	function toUpdateUserPage(id){

		location.href="/users/updateUser.html?id="+id
	}




</script>